<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>产品标准报价系统</title>
    <style>
        /* 基础样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }
        
        /* 顶部导航 */
        .header {
            background-color: #165DFF;
            color: white;
            padding: 15px;
            position: relative;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .header h1 {
            font-size: 1.2rem;
            font-weight: 600;
            text-align: center;
        }
        
        .header-actions {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .action-btn {
            color: white;
            background: none;
            border: none;
            font-size: 1rem;
            cursor: pointer;
            padding: 5px 10px;
        }
        
        /* 主容器 */
        .container {
            max-width: 500px;
            margin: 0 auto;
            padding: 15px;
        }
        
        /* 产品信息卡片 */
        .product-card {
            background-color: white;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }
        
        .product-header {
            display: flex;
            margin-bottom: 15px;
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        
        .product-image {
            width: 80px;
            height: 80px;
            background-color: #e8f0ff;
            border-radius: 8px;
            margin-right: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #165DFF;
            font-weight: bold;
        }
        
        .product-info h2 {
            font-size: 1.1rem;
            margin-bottom: 5px;
            color: #333;
        }
        
        .product-meta {
            font-size: 0.9rem;
            color: #666;
            margin-bottom: 3px;
        }
        
        /* 业务关联信息 */
        .business-info {
            background-color: #f9fbff;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 15px;
            font-size: 0.9rem;
        }
        
        .business-info h3 {
            font-size: 0.95rem;
            color: #165DFF;
            margin-bottom: 8px;
            font-weight: 600;
        }
        
        .business-fields {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }
        
        .business-field {
            background-color: white;
            padding: 6px 10px;
            border-radius: 6px;
            border: 1px solid #e0e8ff;
        }
        
        .business-field label {
            display: block;
            font-size: 0.75rem;
            color: #666;
            margin-bottom: 2px;
        }
        
        .business-field input {
            width: 100%;
            border: none;
            font-size: 0.9rem;
            color: #333;
            padding: 2px 0;
        }
        
        .business-field input:focus {
            outline: none;
            color: #165DFF;
        }
        
        /* 套餐选择区域 */
        .packages-section {
            margin-bottom: 20px;
        }
        
        .section-title {
            font-size: 1rem;
            color: #333;
            margin-bottom: 10px;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .section-title .add-btn {
            font-size: 0.85rem;
            color: #165DFF;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
        }
        
        .package-list {
            margin-bottom: 15px;
        }
        
        /* 套餐卡片 */
        .package-card {
            background-color: white;
            border-radius: 10px;
            margin-bottom: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
            overflow: hidden;
        }
        
        .package-header {
            padding: 12px 15px;
            background-color: #f5f8ff;
            border-bottom: 1px solid #e8f0ff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
        }
        
        .package-title {
            font-size: 1rem;
            font-weight: 600;
            color: #333;
        }
        
        .package-price {
            font-size: 1rem;
            font-weight: 700;
            color: #165DFF;
        }
        
        .package-actions {
            display: flex;
            gap: 8px;
        }
        
        .package-action-btn {
            background: none;
            border: none;
            color: #666;
            cursor: pointer;
            font-size: 0.9rem;
        }
        
        .package-action-btn.edit {
            color: #165DFF;
        }
        
        .package-action-btn.delete {
            color: #ff5630;
        }
        
        /* 套餐明细 */
        .package-details {
            padding: 15px;
            display: none;
        }
        
        .package-details.expanded {
            display: block;
        }
        
        .package-items {
            margin-bottom: 10px;
        }
        
        .package-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #f0f0f0;
            font-size: 0.9rem;
        }
        
        .package-item:last-child {
            border-bottom: none;
        }
        
        .item-name {
            color: #555;
        }
        
        .item-qty {
            color: #888;
        }
        
        .package-description {
            font-size: 0.85rem;
            color: #666;
            padding: 8px 0;
            border-top: 1px dashed #eee;
            margin-top: 5px;
        }
        
        /* 按钮样式 */
        .btn {
            display: inline-block;
            padding: 12px 0;
            background-color: #165DFF;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 0.95rem;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.2s;
            text-align: center;
            width: 100%;
        }
        
        .btn:hover {
            background-color: #0E4CD1;
        }
        
        .btn-secondary {
            background-color: white;
            color: #165DFF;
            border: 1px solid #165DFF;
        }
        
        .btn-secondary:hover {
            background-color: #f0f5ff;
        }
        
        .bottom-actions {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            padding: 12px 15px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
            max-width: 500px;
            margin: 0 auto;
            display: flex;
            gap: 10px;
        }
        
        .bottom-actions .btn {
            flex: 1;
        }
        
        /* 弹窗样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            display: none;
        }
        
        .modal-overlay.show {
            display: flex;
        }
        
        .modal {
            background-color: white;
            border-radius: 10px;
            width: 90%;
            max-width: 400px;
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .modal-header {
            padding: 15px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #333;
        }
        
        .modal-close {
            background: none;
            border: none;
            font-size: 1.2rem;
            cursor: pointer;
            color: #666;
        }
        
        .modal-body {
            padding: 15px;
        }
        
        .modal-footer {
            padding: 12px 15px;
            border-top: 1px solid #eee;
            display: flex;
            gap: 10px;
        }
        
        .modal-footer .btn {
            flex: 1;
        }
        
        /* 表单样式 */
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-size: 0.9rem;
            color: #555;
            font-weight: 500;
        }
        
        .form-control {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 0.95rem;
            transition: border-color 0.2s;
        }
        
        .form-control:focus {
            outline: none;
            border-color: #165DFF;
            box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.2);
        }
        
        .item-row {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
            align-items: center;
        }
        
        .item-row .form-control {
            flex: 1;
        }
        
        .remove-item {
            background: none;
            border: none;
            color: #ff5630;
            cursor: pointer;
            font-size: 1.2rem;
            padding: 0 5px;
        }
        
        .add-item-btn {
            display: inline-block;
            color: #165DFF;
            background: none;
            border: 1px dashed #165DFF;
            width: 100%;
            padding: 8px 0;
            border-radius: 6px;
            font-size: 0.9rem;
            cursor: pointer;
            margin-top: 5px;
        }
        
        /* 提示信息 */
        .toast {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            padding: 10px 15px;
            border-radius: 6px;
            color: white;
            font-size: 0.9rem;
            z-index: 1001;
            display: none;
        }
        
        .toast.show {
            display: block;
            animation: fadeInUp 0.3s, fadeOut 0.3s 2.7s;
        }
        
        .toast.success {
            background-color: rgba(54, 179, 126, 0.9);
        }
        
        .toast.error {
            background-color: rgba(255, 86, 48, 0.9);
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translate(-50%, 20px);
            }
            to {
                opacity: 1;
                transform: translate(-50%, 0);
            }
        }
        
        @keyframes fadeOut {
            from {
                opacity: 1;
                transform: translate(-50%, 0);
            }
            to {
                opacity: 0;
                transform: translate(-50%, -20px);
            }
        }
        
        /* 加载状态 */
        .loading {
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="header">
        <h1>产品标准报价</h1>
        <div class="header-actions">
            <button class="action-btn" id="save-all-btn">保存</button>
        </div>
    </div>
    
    <!-- 主内容区 -->
    <div class="container">
        <!-- 产品信息 -->
        <div class="product-card">
            <div class="product-header">
                <div class="product-image">产品图</div>
                <div class="product-info">
                    <h2>智能办公系统 V3.0</h2>
                    <div class="product-meta">产品ID: PROD-2023-0589</div>
                    <div class="product-meta">版本: 企业级</div>
                </div>
            </div>
            <p>新一代智能办公解决方案，集成考勤、审批、协作等功能，提升企业办公效率。</p>
        </div>
        
        <!-- 业务关联信息 -->
        <div class="business-info">
            <h3>业务关联信息</h3>
            <div class="business-fields">
                <div class="business-field">
                    <label for="mei_id">项目ID (mei_id)</label>
                    <input type="number" id="mei_id" placeholder="输入项目ID">
                </div>
                <div class="business-field">
                    <label for="store_id">门店ID (store_id)</label>
                    <input type="number" id="store_id" placeholder="输入门店ID">
                </div>
                <div class="business-field">
                    <label for="staff_id">员工ID (staff_id)</label>
                    <input type="number" id="staff_id" placeholder="输入员工ID">
                </div>
                <div class="business-field">
                    <label for="cyber_id">业务线ID (cyber_id)</label>
                    <input type="number" id="cyber_id" placeholder="输入业务线ID">
                </div>
            </div>
        </div>
        
        <!-- 套餐列表 -->
        <div class="packages-section">
            <div class="section-title">
                <span>标准套餐报价</span>
                <button class="add-btn" id="add-package-btn">+ 添加套餐</button>
            </div>
            
            <div class="package-list" id="package-list">
                <!-- 套餐1 - 基础版 -->
                <div class="package-card">
                    <div class="package-header" onclick="togglePackageDetails(1)">
                        <div class="package-title">基础版套餐</div>
                        <div class="package-price">¥3,800.00</div>
                        <div class="package-actions">
                            <button class="package-action-btn edit" onclick="editPackage(1, event)">编辑</button>
                            <button class="package-action-btn delete" onclick="deletePackage(1, event)">删除</button>
                        </div>
                    </div>
                    <div class="package-details" id="package-details-1">
                        <div class="package-items">
                            <div class="package-item">
                                <div class="item-name">核心办公模块</div>
                                <div class="item-qty">1套</div>
                            </div>
                            <div class="package-item">
                                <div class="item-name">用户授权</div>
                                <div class="item-qty">50用户</div>
                            </div>
                            <div class="package-item">
                                <div class="item-name">云存储</div>
                                <div class="item-qty">50GB</div>
                            </div>
                            <div class="package-item">
                                <div class="item-name">技术支持</div>
                                <div class="item-qty">3个月</div>
                            </div>
                        </div>
                        <div class="package-description">
                            适合小型团队使用，包含基础办公功能和有限的用户授权，提供3个月技术支持服务。
                        </div>
                    </div>
                </div>
                
                <!-- 套餐2 - 标准版 -->
                <div class="package-card">
                    <div class="package-header" onclick="togglePackageDetails(2)">
                        <div class="package-title">标准版套餐</div>
                        <div class="package-price">¥8,600.00</div>
                        <div class="package-actions">
                            <button class="package-action-btn edit" onclick="editPackage(2, event)">编辑</button>
                            <button class="package-action-btn delete" onclick="deletePackage(2, event)">删除</button>
                        </div>
                    </div>
                    <div class="package-details" id="package-details-2">
                        <div class="package-items">
                            <div class="package-item">
                                <div class="item-name">核心办公模块</div>
                                <div class="item-qty">1套</div>
                            </div>
                            <div class="package-item">
                                <div class="item-name">用户授权</div>
                                <div class="item-qty">200用户</div>
                            </div>
                            <div class="package-item">
                                <div class="item-name">云存储</div>
                                <div class="item-qty">200GB</div>
                            </div>
                            <div class="package-item">
                                <div class="item-name">技术支持</div>
                                <div class="item-qty">12个月</div>
                            </div>
                            <div class="package-item">
                                <div class="item-name">移动端应用</div>
                                <div class="item-qty">包含</div>
                            </div>
                        </div>
                        <div class="package-description">
                            适合中小型企业，包含完整功能和扩展用户授权，提供1年技术支持和移动端应用访问。
                        </div>
                    </div>
                </div>
                
                <!-- 套餐3 - 企业版 -->
                <div class="package-card">
                    <div class="package-header" onclick="togglePackageDetails(3)">
                        <div class="package-title">企业版套餐</div>
                        <div class="package-price">¥19,800.00</div>
                        <div class="package-actions">
                            <button class="package-action-btn edit" onclick="editPackage(3, event)">编辑</button>
                            <button class="package-action-btn delete" onclick="deletePackage(3, event)">删除</button>
                        </div>
                    </div>
                    <div class="package-details" id="package-details-3">
                        <div class="package-items">
                            <div class="package-item">
                                <div class="item-name">核心办公模块</div>
                                <div class="item-qty">1套</div>
                            </div>
                            <div class="package-item">
                                <div class="item-name">用户授权</div>
                                <div class="item-qty">500用户</div>
                            </div>
                            <div class="package-item">
                                <div class="item-name">云存储</div>
                                <div class="item-qty">1TB</div>
                            </div>
                            <div class="package-item">
                                <div class="item-name">技术支持</div>
                                <div class="item-qty">36个月</div>
                            </div>
                            <div class="package-item">
                                <div class="item-name">移动端应用</div>
                                <div class="item-qty">包含</div>
                            </div>
                            <div class="package-item">
                                <div class="item-name">定制报表</div>
                                <div class="item-qty">包含</div>
                            </div>
                        </div>
                        <div class="package-description">
                            适合中大型企业，包含全部功能和高级支持服务，提供3年技术支持和定制化报表功能。
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部留出空间 -->
        <div style="height: 80px;"></div>
    </div>
    
    <!-- 底部操作按钮 -->
    <div class="bottom-actions">
        <button class="btn btn-secondary" id="preview-btn">预览报价单</button>
        <button class="btn" id="export-btn">导出报价</button>
    </div>
    
    <!-- 添加/编辑套餐弹窗 -->
    <div class="modal-overlay" id="package-modal">
        <div class="modal">
            <div class="modal-header">
                <div class="modal-title" id="modal-title">添加套餐</div>
                <button class="modal-close" id="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="package-form">
                    <input type="hidden" id="package-id">
                    <div class="form-group">
                        <label for="package-name">套餐名称</label>
                        <input type="text" id="package-name" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="package-price">套餐价格 (¥)</label>
                        <input type="number" id="package-price" class="form-control" step="0.01" min="0" required>
                    </div>
                    <div class="form-group">
                        <label>套餐明细</label>
                        <div id="package-items-container">
                            <div class="item-row">
                                <input type="text" class="form-control item-name-input" placeholder="项目名称" required>
                                <input type="text" class="form-control item-qty-input" placeholder="数量/规格" required>
                                <button type="button" class="remove-item" onclick="removeItemRow(this)">&times;</button>
                            </div>
                        </div>
                        <button type="button" class="add-item-btn" id="add-item-btn">+ 添加明细项</button>
                    </div>
                    <div class="form-group">
                        <label for="package-description">套餐说明</label>
                        <textarea id="package-description" class="form-control" rows="3" placeholder="请输入套餐说明..."></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-secondary" id="cancel-modal">取消</button>
                <button class="btn" id="save-package-btn">保存</button>
            </div>
        </div>
    </div>
    
    <!-- 提示框 -->
    <div class="toast" id="toast"></div>

    <script>
        // 套餐数据
        let packages = [
            {
                id: 1,
                name: "基础版套餐",
                price: 3800.00,
                items: [
                    { name: "核心办公模块", qty: "1套" },
                    { name: "用户授权", qty: "50用户" },
                    { name: "云存储", qty: "50GB" },
                    { name: "技术支持", qty: "3个月" }
                ],
                description: "适合小型团队使用，包含基础办公功能和有限的用户授权，提供3个月技术支持服务。"
            },
            {
                id: 2,
                name: "标准版套餐",
                price: 8600.00,
                items: [
                    { name: "核心办公模块", qty: "1套" },
                    { name: "用户授权", qty: "200用户" },
                    { name: "云存储", qty: "200GB" },
                    { name: "技术支持", qty: "12个月" },
                    { name: "移动端应用", qty: "包含" }
                ],
                description: "适合中小型企业，包含完整功能和扩展用户授权，提供1年技术支持和移动端应用访问。"
            },
            {
                id: 3,
                name: "企业版套餐",
                price: 19800.00,
                items: [
                    { name: "核心办公模块", qty: "1套" },
                    { name: "用户授权", qty: "500用户" },
                    { name: "云存储", qty: "1TB" },
                    { name: "技术支持", qty: "36个月" },
                    { name: "移动端应用", qty: "包含" },
                    { name: "定制报表", qty: "包含" }
                ],
                description: "适合中大型企业，包含全部功能和高级支持服务，提供3年技术支持和定制化报表功能。"
            }
        ];
        
        // 当前编辑的套餐ID
        let currentEditId = null;
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 添加套餐按钮
            document.getElementById('add-package-btn').addEventListener('click', openAddPackageModal);
            
            // 关闭弹窗按钮
            document.getElementById('close-modal').addEventListener('click', closeModal);
            document.getElementById('cancel-modal').addEventListener('click', closeModal);
            
            // 保存套餐按钮
            document.getElementById('save-package-btn').addEventListener('click', savePackage);
            
            // 添加明细项按钮
            document.getElementById('add-item-btn').addEventListener('click', addItemRow);
            
            // 保存所有按钮
            document.getElementById('save-all-btn').addEventListener('click', saveAllData);
            
            // 预览和导出按钮
            document.getElementById('preview-btn').addEventListener('click', () => showToast('预览功能已触发', 'success'));
            document.getElementById('export-btn').addEventListener('click', () => showToast('报价已导出', 'success'));
        });
        
        // 切换套餐明细显示/隐藏
        function togglePackageDetails(packageId) {
            const detailsElement = document.getElementById(`package-details-${packageId}`);
            detailsElement.classList.toggle('expanded');
        }
        
        // 打开添加套餐弹窗
        function openAddPackageModal() {
            currentEditId = null;
            document.getElementById('modal-title').textContent = '添加套餐';
            document.getElementById('package-form').reset();
            document.getElementById('package-id').value = '';
            
            // 重置明细项，只保留一个空行
            const container = document.getElementById('package-items-container');
            container.innerHTML = `
                <div class="item-row">
                    <input type="text" class="form-control item-name-input" placeholder="项目名称" required>
                    <input type="text" class="form-control item-qty-input" placeholder="数量/规格" required>
                    <button type="button" class="remove-item" onclick="removeItemRow(this)">&times;</button>
                </div>
            `;
            
            // 显示弹窗
            document.getElementById('package-modal').classList.add('show');
        }
        
        // 打开编辑套餐弹窗
        function editPackage(packageId, event) {
            // 阻止事件冒泡，避免触发套餐明细的展开/折叠
            if (event) event.stopPropagation();
            
            currentEditId = packageId;
            const packageData = packages.find(pkg => pkg.id === packageId);
            if (!packageData) return;
            
            document.getElementById('modal-title').textContent = '编辑套餐';
            document.getElementById('package-id').value = packageData.id;
            document.getElementById('package-name').value = packageData.name;
            document.getElementById('package-price').value = packageData.price;
            document.getElementById('package-description').value = packageData.description;
            
            // 填充明细项
            const container = document.getElementById('package-items-container');
            container.innerHTML = '';
            
            packageData.items.forEach((item, index) => {
                const row = document.createElement('div');
                row.className = 'item-row';
                row.innerHTML = `
                    <input type="text" class="form-control item-name-input" placeholder="项目名称" value="${item.name}" required>
                    <input type="text" class="form-control item-qty-input" placeholder="数量/规格" value="${item.qty}" required>
                    <button type="button" class="remove-item" onclick="removeItemRow(this)">&times;</button>
                `;
                container.appendChild(row);
            });
            
            // 显示弹窗
            document.getElementById('package-modal').classList.add('show');
        }
        
        // 关闭弹窗
        function closeModal() {
            document.getElementById('package-modal').classList.remove('show');
        }
        
        // 添加明细项行
        function addItemRow() {
            const container = document.getElementById('package-items-container');
            const row = document.createElement('div');
            row.className = 'item-row';
            row.innerHTML = `
                <input type="text" class="form-control item-name-input" placeholder="项目名称" required>
                <input type="text" class="form-control item-qty-input" placeholder="数量/规格" required>
                <button type="button" class="remove-item" onclick="removeItemRow(this)">&times;</button>
            `;
            container.appendChild(row);
        }
        
        // 移除明细项行
        function removeItemRow(button) {
            const row = button.parentElement;
            const container = document.getElementById('package-items-container');
            
            // 至少保留一行
            if (container.children.length > 1) {
                container.removeChild(row);
            } else {
                // 清空输入
                row.querySelector('.item-name-input').value = '';
                row.querySelector('.item-qty-input').value = '';
            }
        }
        
        // 保存套餐
        function savePackage() {
            const packageName = document.getElementById('package-name').value;
            const packagePrice = parseFloat(document.getElementById('package-price').value);
            const packageDescription = document.getElementById('package-description').value;
            
            // 验证基本信息
            if (!packageName || isNaN(packagePrice) || packagePrice < 0) {
                showToast('请填写有效的套餐名称和价格', 'error');
                return;
            }
            
            // 收集明细项
            const itemRows = document.querySelectorAll('#package-items-container .item-row');
            const items = [];
            
            for (let row of itemRows) {
                const name = row.querySelector('.item-name-input').value.trim();
                const qty = row.querySelector('.item-qty-input').value.trim();
                
                if (!name || !qty) {
                    showToast('请填写完整的明细项信息', 'error');
                    return;
                }
                
                items.push({ name, qty });
            }
            
            if (items.length === 0) {
                showToast('请至少添加一项套餐明细', 'error');
                return;
            }
            
            // 构建套餐数据
            const packageData = {
                name: packageName,
                price: packagePrice,
                items: items,
                description: packageDescription
            };
            
            // 模拟保存操作
            showLoadingInButton(document.getElementById('save-package-btn'));
            
            setTimeout(() => {
                if (currentEditId) {
                    // 更新现有套餐
                    const index = packages.findIndex(pkg => pkg.id === currentEditId);
                    if (index !== -1) {
                        packages[index] = { ...packages[index], ...packageData };
                    }
                    showToast('套餐已更新', 'success');
                } else {
                    // 添加新套餐
                    const newId = packages.length > 0 ? Math.max(...packages.map(pkg => pkg.id)) + 1 : 1;
                    packages.push({ id: newId, ...packageData });
                    showToast('新套餐已添加', 'success');
                }
                
                // 重新渲染套餐列表
                renderPackageList();
                
                // 关闭弹窗
                closeModal();
                
                // 恢复按钮状态
                restoreButton(document.getElementById('save-package-btn'), '保存');
            }, 800);
        }
        
        // 删除套餐
        function deletePackage(packageId, event) {
            // 阻止事件冒泡
            if (event) event.stopPropagation();
            
            if (confirm('确定要删除这个套餐吗？')) {
                // 过滤掉要删除的套餐
                packages = packages.filter(pkg => pkg.id !== packageId);
                
                // 重新渲染套餐列表
                renderPackageList();
                
                showToast('套餐已删除', 'success');
            }
        }
        
        // 重新渲染套餐列表
        function renderPackageList() {
            const listContainer = document.getElementById('package-list');
            listContainer.innerHTML = '';
            
            if (packages.length === 0) {
                listContainer.innerHTML = '<div style="text-align: center; padding: 20px; color: #666;">暂无套餐，请添加套餐</div>';
                return;
            }
            
            packages.forEach(pkg => {
                // 创建套餐卡片
                const packageCard = document.createElement('div');
                packageCard.className = 'package-card';
                
                // 套餐标题栏
                const header = document.createElement('div');
                header.className = 'package-header';
                header.setAttribute('onclick', `togglePackageDetails(${pkg.id})`);
                header.innerHTML = `
                    <div class="package-title">${pkg.name}</div>
                    <div class="package-price">¥${pkg.price.toFixed(2)}</div>
                    <div class="package-actions">
                        <button class="package-action-btn edit" onclick="editPackage(${pkg.id}, event)">编辑</button>
                        <button class="package-action-btn delete" onclick="deletePackage(${pkg.id}, event)">删除</button>
                    </div>
                `;
                
                // 套餐明细
                const details = document.createElement('div');
                details.className = 'package-details';
                details.id = `package-details-${pkg.id}`;
                
                // 明细项
                let itemsHtml = '<div class="package-items">';
                pkg.items.forEach(item => {
                    itemsHtml += `
                        <div class="package-item">
                            <div class="item-name">${item.name}</div>
                            <div class="item-qty">${item.qty}</div>
                        </div>
                    `;
                });
                itemsHtml += '</div>';
                
                // 套餐说明
                itemsHtml += `<div class="package-description">${pkg.description || '无说明'}</div>`;
                
                details.innerHTML = itemsHtml;
                
                // 组装套餐卡片
                packageCard.appendChild(header);
                packageCard.appendChild(details);
                
                // 添加到列表
                listContainer.appendChild(packageCard);
            });
        }
        
        // 保存所有数据
        function saveAllData() {
            // 获取业务关联信息
            const businessData = {
                mei_id: document.getElementById('mei_id').value,
                store_id: document.getElementById('store_id').value,
                staff_id: document.getElementById('staff_id').value,
                cyber_id: document.getElementById('cyber_id').value
            };
            
            // 构建完整数据对象
            const allData = {
                product: {
                    name: "智能办公系统 V3.0",
                    id: "PROD-2023-0589",
                    version: "企业级"
                },
                business: businessData,
                packages: packages,
                updatedAt: new Date().toLocaleString()
            };
            
            // 模拟保存操作
            const saveButton = document.getElementById('save-all-btn');
            const originalText = saveButton.textContent;
            saveButton.innerHTML = '<div class="loading"></div>';
            saveButton.disabled = true;
            
            setTimeout(() => {
                // 在实际应用中，这里会将数据发送到后端保存
                console.log('保存所有数据:', allData);
                
                // 恢复按钮状态
                saveButton.textContent = originalText;
                saveButton.disabled = false;
                
                showToast('所有数据已保存', 'success');
            }, 1000);
        }
        
        // 显示提示信息
        function showToast(message, type = 'success') {
            const toast = document.getElementById('toast');
            toast.textContent = message;
            toast.className = 'toast';
            toast.classList.add(type, 'show');
            
            // 3秒后自动隐藏
            setTimeout(() => {
                toast.classList.remove('show');
            }, 3000);
        }
        
        // 在按钮中显示加载状态
        function showLoadingInButton(button) {
            const originalText = button.textContent;
            button.innerHTML = '<div class="loading"></div>';
            button.disabled = true;
            button.dataset.originalText = originalText;
        }
        
        // 恢复按钮状态
        function restoreButton(button, text) {
            button.innerHTML = text || button.dataset.originalText || '保存';
            button.disabled = false;
        }
    </script>
</body>
</html>
